<template>
    <div>
        <!-- 面包屑头部区域 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>症状管理</el-breadcrumb-item>
          <el-breadcrumb-item>症状列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
          <!-- 搜索与添加区域 -->
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input placeholder="请输入内容" v-model="inputInfo" clearable @clear="getSympthom">
                <el-button slot="append" icon="el-icon-search" @click="searchFn"></el-button>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="addDialogvisible = true">添加症状</el-button>
            </el-col>
          </el-row>
          <!-- 症状列表区域 -->
          <el-table :data="sympthomList" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="症状名称" prop="sympthomname"></el-table-column>
            <el-table-column label="症状描述" prop="description" width="560px"></el-table-column>
            <el-table-column label="建议用药" prop="medicine"></el-table-column>
            <el-table-column label="建议挂号" prop="department"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row}">
                <!-- {{scope.row}} -->
                <!-- 修改按钮 -->
                <el-tooltip effect="dark" content="修改症状" placement="top" :enterable="false">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(row)"></el-button>
                </el-tooltip>
                <!-- 删除按钮 -->
                <el-tooltip effect="dark" content="删除症状" placement="top" :enterable="false">
                  <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[2, 5, 8, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :disabled="isBanPage">
          </el-pagination>
          <!-- 添加症状 -->
          <el-dialog
            :title="editDialogVisible?'修改症状信息':'新增症状信息'"
            :visible.sync="addDialogvisible"
            width="50%"
            @close="addDialogClosed">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="90px">
              <el-form-item label="症状名" prop="sympthomname">
                <el-input v-model="addForm.sympthomname"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input v-model="addForm.description" type="textarea" :rows="2"></el-input>
              </el-form-item>
              <el-form-item label="推荐用药" prop="medicine">
                <el-input v-model="addForm.medicine"></el-input>
              </el-form-item>
              <el-form-item label="建议科室" prop="department">
                <el-input v-model="addForm.department"></el-input>
              </el-form-item>
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="addForm.keyword"></el-input>
              </el-form-item>
              <el-form-item label="部位" prop="part">
                <el-select v-model="addForm.part" placeholder="请选择" @change="selectChange" :disabled="editDialogVisible">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="ID">
                <el-tag v-model="addForm.pid">{{addForm.pid}}</el-tag>
              </el-form-item>
            </el-form>
            <span slot="footer">
              <el-button @click="addDialogvisible = false">取 消</el-button>
              <el-button type="primary" @click="addSympthom">确 定</el-button>
            </span>
          </el-dialog>
        </el-card>
    </div>
</template>

<script>
import { part } from '../../assets/const/data.js'
export default {
  data () {
    return {
      // 发起查询请求的页数和页码
      queryInfo: {
        pagesize: 5,
        pagenum: 1
      },
      // 输入框中的信息
      inputInfo: '',
      // 症状信息
      sympthomList: [],
      total: 0,
      // 是否禁用pagenation
      isBanPage: false,
      // 添加/修改对话框的现实与隐藏
      addDialogvisible: false,
      // 添加/修改对话框的表单信息
      addForm: {
        description: '',
        department: '',
        sympthomname: '',
        keyword: '',
        medicine: '',
        part: '',
        pid: '0'
      },
      // 添加/修改对话框select数据
      options: part,
      // 添加/修改对话框的验证规则
      addFormRules: {
        sympthomname: [
          { required: true, message: '请输入症状名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入症状描述', trigger: 'blur' }
        ],
        medicine: [
          { required: true, message: '请输入推荐用药', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入建议挂号的科室', trigger: 'blur' }
        ],
        keyword: [
          { required: true, message: '请输入关键字', trigger: 'blur' }
        ],
        part: [
          { required: true, message: '请选中部位', trigger: 'blur' }
        ]
      },
      // 修改对话框的显示与隐藏
      editDialogVisible: false,
      // 修改症状信息所需的id
      editInfoId: ''
    }
  },
  created () {
    this.getSympthom()
  },
  methods: {
    async getSympthom () {
      const { data: res } = await this.$http.get('sympthom', { params: this.queryInfo })
      //   console.log(res)
      this.sympthomList = res.data
      this.total = res.total
      this.isBanPage = false
    },
    // 监听pagesize改变的事件
    handleSizeChange (newsize) {
      this.queryInfo.pagesize = newsize
      this.getSympthom()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newpage) {
      this.queryInfo.pagenum = newpage
      this.getSympthom()
    },
    // 模糊搜索
    async searchFn () {
      const { data: res } = await this.$http.get('sympthom/like', { params: { spinfo: this.inputInfo } })
      if (res.status !== 200) return this.$message.error('搜索失败')
      this.sympthomList = res.data
      this.total = this.sympthomList.length
      this.isBanPage = true
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
      this.editDialogVisible = false
    },
    // 下拉框选中值变化
    selectChange (e) {
      this.options.forEach((item, index) => {
        if (item.label === e) {
          this.addForm.pid = index + 1
          return true
        }
      })
    },
    // 发起添加/修改请求
    addSympthom () {
      if (this.editDialogVisible) {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          // 预校验通过，发起请求
          const { data: res } = await this.$http.put('sympthom/' + this.editInfoId, this.addForm)
          if (res.status !== 200) return this.$message.error('修改症状信息失败')
          this.$message.success('修改症状信息成功')
          // 隐藏添加用户对话框
          this.addDialogvisible = false
          // 重新获取用户列表
          this.getSympthom()
        })
      } else {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          // 预校验通过，发起请求
          const { data: res } = await this.$http.post('sympthom/add', this.addForm)
          if (res.status !== 200) return this.$message.error('添加症状信息失败')
          this.$message.success('添加症状信息成功')
          // 隐藏添加用户对话框
          this.addDialogvisible = false
          // 重新获取用户列表
          this.getSympthom()
        })
      }
    },
    // 点击修改按钮
    showEditDialog (e) {
      this.editDialogVisible = true
      this.addDialogvisible = true
      this.addForm.sympthomname = e.sympthomname
      this.addForm.description = e.description
      this.addForm.medicine = e.medicine
      this.addForm.department = e.department
      this.addForm.keyword = e.keyword
      this.addForm.part = e.part
      this.addForm.pid = e.pid
      this.editInfoId = e.ID
    }
  }
}
</script>

<style lang="less" scoped>

</style>
